昨天我們了解到當元件 Shape 形狀改變時，可以增加動畫讓改變動態更順暢，也更能突顯元件。在品牌與層次結構間使用形狀能建立統一的品牌結構基礎，若是需要突顯的元件也可以使用品牌標誌的相似形狀運用於組件，過度使用品牌形狀會導致形狀不具有獨特性而無法突顯目標，過多獨特形狀會使各元件之間缺乏視覺凝聚力。
今天我們進入到 Material Design 中 Motion 動作的章節，由於內容涵蓋的範圍較廣，我們會分成兩天來介紹，今天會先了解動作和動作系統，讓我們繼續看下去吧。
Understanding motion 了解動作
The motion system 動作系統
Speed 速度
SChoreography 編舞
Customization 客制化
用戶可以從動作設計的元件、操作可用性和操作結果來了解元件之間的關聯。在重要的元件上加入動作設計可以將用戶的注意力集中在目標元件上，而不會造成不必要的干擾。動作設計用於慶祝的關鍵時刻，為常見的互動增加個性來表達品牌風格。
動作設計通過轉場表示元件之間的關聯，可以幫助用戶確定方位，也反映了元件間的層次結構關係。動作設計用於表達品牌，藉由不同的轉場效果表現個性和風格。圖示、插圖和品牌標誌 ( LOGO )的動畫可以增加用戶體驗的趣味性，動態圖示可以歡樂得增強圖示含義。動作設計可以強調關鍵時刻。( 例如: 獎勵用戶完成任務的動畫可以使關鍵時刻更加令人難忘。)
動作設計提供用戶即時的互動回饋或表示系統操作的狀態。例如:
1.響應鍵盤輸入的動畫元素會提供回饋，顯示操作是否成功。
2.動態顯示畫面正在載入的項目。
3.移動畫面中的區塊在拖放時周圍區塊也同時改變位子。
動作設計幫助用戶了解如何執行操作。例如:
1.滑動解鎖動作具有動畫效果，可以加入文字提示用戶解鎖手勢。
2.將商品加入購物車時會依據加人的先後順序排列。
動作系統是一組轉場模式，可以幫助用戶理解和導覽應用程式。目前僅有 Android 及 Flutter 提供開發文件。
動作系統由四個模式組成，用於在元件或全螢幕之間轉換。通過動作系統加強 UI 元件之間的關係來幫助用戶導覽和理解應用程式。轉場模式分別為:
使用動作系統前需要考慮在哪些元件上使用，比如：永久性容器是轉場的一部分嗎? UI 元件之間是否存在空間或導覽關係？ UI 元件是否進入或退出螢幕？
容器是用來表示封閉區域的形狀 ( 例如: 按鈕、列表、區塊 )，容器間的轉場適用於永久性容器 ( 例如: 按鈕擴展為全螢幕區塊的訊息頁面 )。這些元件轉場適用於容器區塊轉換。
如果元件需要強調空間關係 ( 例如: 例如垂直或水平排版中的元件 )。或者元件之間可能存在導覽關係 (例如: 步驟項目前進或後退選項)，這些元件轉場適用於共享軸轉換。
當元件之間的主題相關性較低時可以使用直接漸變的轉場動畫轉換畫面 ( 例如: 導覽列的項目選項 )。
在選項提供前往或離開畫面或是彈出視窗畫面，將背景元件色彩變淡及亮度變低來突顯主要視窗元件。當畫面之間的主題關聯性較小時，讓頁面內容淡化進行轉場，頁面中的元件轉場適用於漸變轉場。
在容器範圍縮放時可以設計元件間的轉場，轉場效果可以增強兩個元件之間的關係 ( 例如: 當圖示按鈕擴展區塊顯示聯絡資料的頁面時，將用戶的目光吸引到擴展後的聯絡資料頁面 )。可以搭配 Material 動態圖說明容器轉換，更能了解下面的說明
容器轉換的範例（規律動作和慢動作）：
容器轉場也可以應用於佔據部分畫面且不會擴展為全螢幕的容器轉換。
容器轉換的示範例子：
在容器轉場期間容器的尺寸、位置、形狀會同時進行動畫處理，容器的內容從頂部邊緣開始依照變形後的容器尺寸顯示內容，在顯示畫面項目時依序使用淡入或淡出顯示項目。可以藉由 Material 提供的 互動式工具 ( 如下圖 ) 了解畫面在時間軸上轉換的過程。
對元件使用漸變轉場時可能會在轉場過程將畫面變為半透明度轉換時看到下方元件，在此情況下，通過淡入淡出轉場效果，先淡出螢幕前畫面再淡入要顯示的畫面。
共享軸線模式用於具有空間或導覽關係的 UI 元件之間的轉場。在 X 軸使用共同的轉場動畫，在 y 或 z 軸上則增強元件之間的關係。
用一個比較簡單的例子來解釋這三個軸線與 UI 畫面元件的關係，X 軸轉場 (水平) 適用於同一主題畫面的轉換 ( 例如: 行事曆週間日程活動切換顯示 )，Y 軸 ( 垂直 ) 轉場適用於有步驟性的畫面轉場 ( 例如: 問卷填寫的步驟頁面切換 )，Z 軸使用於層次結構中的轉場 ( 例如: 進入應用程式設定頁面及退出頁面 )。
所有元件共享水平（ x軸 ）、垂直（ y軸 ）及高度（ z軸 ）從而進行轉換，元件依照畫面轉換顯示淡入或淡出的轉場效果。如果不使用淡入或淡出的轉場效果會導致切換畫面時出現閃爍的情況。
當畫面之間的主題關聯性較小時，讓頁面內容淡化進行轉場，這些元件轉場適用於漸變轉場，( 例如: 底部導覽列的切換轉場最適合使用淡入淡出的效果，底部導覽列項目較無主題關聯，項目彼此之間有不同的任務，淡入效果不會誤導用戶以為仍在同樣的主題間水平移動 )。
在淡入轉場中，首先動作為淡出元件，接下來轉入元件逐漸淡入，同時將整體大小從 92% 縮放到 100%。元件縮放比例從 92% （ 而不是0% ）開始，避免引起對於轉場的過多關注，縮放比例畫面僅應用於轉入的元件，在畫面上強調新內容。
漸變轉場效果用於畫面上有局部擴展的元件，由螢幕中心向外變淡的轉換效果。( 例如: 月曆、選單、訊息視窗、浮動按鈕 )
顯示畫面時，元件使用淡入淡出透明度從 80% 調高到 100%。透明度從 80% （ 而不是0% ）開始，退出畫面時元件只會淡出，避免引起對於轉場的過多關注，在畫面上強調新內容（ 輸入元素 ）上而不是舊內容（ 現有元素 ）上。
在預設狀態下，淡入顯示會從元件中心點開始顯示內容調高透明度，在設計上也可以改變開始顯示的定位，藉由顯示方向指示兩元件的關聯性，例如: 應用程式上更多設定的選單從右上角的設定圖示開始透明漸變顯示。
今天我們了解到 Motion 動作可以強化結構層次、表現品牌、增加回饋和狀態及幫助用戶執行。更了解到各種畫面及元件在轉場動畫上的設定，各種主題在軸線上的轉場含義，使用順暢的動畫效果強調轉入元素，在各種細節上增強畫面元件的關聯性、提供使用者互動回饋。
明天讓我們繼續完成 Motion 動作 的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！
如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~
iThome鐵人賽
看影片追技術